<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中样式绑定方式</title>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 100;
        }

        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>
<div id="app">
    <!--普通样式使用方式-->
    <h1 class="red thin" > {{ msg }} </h1>

    <!--vue格式为['style'], 必须用单引号修饰，不然会识别为属性值到data中查找-->
    <h1 :class="['red', 'thin']" > {{ msg }} </h1>

    <!--vue格式为['style'], 使用三元表达式-->
    <h1 :class="[flag?'red':'', 'thin', 'italic']" > {{ msg }} </h1>

    <!--vue格式为['style'], 对象属性方式-->
    <h1 :class="myCss" > {{ msg }} </h1>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world',
            flag: true,
            myCss: {red: true, thin: true, italic: true}
        }
    })
</script>
</body>
</html>
